<template>
<div>
  <div style="margin-top: 15px">
      <span>开始日期：</span>
      <input type="date" class="i_time" />
      <span style="margin-left: 10px">开始时间：</span>
      <input type="time" class="i_time" />
      <span style="margin-left: 10px"> 结束日期：</span>
      <input type="date" class="i_time" />
      <span style="margin-left: 10px">结束时间：</span>
      <input type="time" class="i_time" />
    </div>
    <div class="spjz_flex">
      <div id="main" style="margin-top:200px" :style="{ width: '1000px', height: '500px'}"></div>
      <policesingto style="margin-top:260px"></policesingto>
    </div>

    <!-- <echart></echart> -->
</div>
</template>

<script>
import policesingto from '../dorm/policesingto.vue'
import * as echarts from "echarts";
export default {
name: "echart",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  components:{
    policesingto
  },
  comments: {
    echarts

  },
  methods:{
      show(){

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title:{
          text: '异常数据',
          textStyle:{
            color: 'white'
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle:{
                    color:"white"
                }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["A区", "B区", "C区", "D区", "E区", "F区", "G区"],
            axisLabel: {
                show: true,
                textStyle:{
                    color:"white"
                }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
                show: true,
                textStyle:{
                    color:"white"
                }
            }
          }
          ,
        ],
        series: [
          {
            name: "异常次数  单位(次)",
            type: "bar",
            stack: "Ad",
            color: "red",
            emphasis: {
              focus: "series",
            },
            data: [1, 3, 2, 3, 3, 3, 3],
          }
        ],
      };
      option && myChart.setOption(option);
      }
  },
  mounted(){
      this.show();
  }
}
</script>

<style scoped>

</style>
